<template>
  <section>
    <!--工具条-->
    <QuestionTypeTooBar :categoryData="categoryData" :buttonList="buttonList" @callFunction="callFunction"></QuestionTypeTooBar>
        <el-pagination
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :page-size="page.PageSize"
      :total="page.PageCount"
      style="float: right"
    >
    </el-pagination>

    <el-table
      :data="tableData"
      highlight-current-row
      v-loading="listLoading"
      style="width: 100%"
      ref="mytable"
      @row-click="clickRow"
    >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column label="序号" width="70px">
        <template slot-scope="scope">
          {{ (page.PageIndex - 1) * page.PageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="CategoryName" label="所属考试"  width="150" >
      </el-table-column>
        <el-table-column
        prop="Name"
        label="题型名称"
        width="200"
      ></el-table-column>
            <el-table-column prop="QuestionTypeText" label="题型分类"  width="150" ></el-table-column>
        <el-table-column
        prop="Content"
        label="简介"
        width="400"
      ></el-table-column>
        <el-table-column
        prop="Sequence"
        label="序号"
        width="100"
      ></el-table-column>

       <el-table-column
        label="是否启用"
        width="100"
      >
         <template slot-scope="scope">
          <el-tag
            :type="!scope.row.IsEnabled ? 'success' : 'danger'"
            disable-transitions
            >{{ !scope.row.IsEnabled ? "否" : "是" }}</el-tag
          >
        </template>
      </el-table-column>

             <el-table-column
        prop="InsertTime"
        label="添加时间"
        width="250"
      ></el-table-column>
    </el-table>
      <el-pagination
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :page-size="page.PageSize"
      :total="page.PageCount"
      style="float: right"
    >
    </el-pagination>

        <!--新增界面-->
    <el-dialog
      title="新增"
      :visible.sync="addFormVisible"
      v-model="addFormVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addForm"
        label-width="80px"
        :rules="addFormRules"
        ref="addFormRef"
      >
        <el-form-item label="题型名称" prop="Name">
          <el-input v-model="addForm.Name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="Sequence">
          <el-input v-model="addForm.Sequence" auto-complete="off"></el-input>
        </el-form-item>
<el-form-item label="题型类型" prop="Type" >
  <el-select v-model="addForm.Type" placeholder="请选择">
    <el-option
      v-for="item in questionTypes"
      :key="item.Value"
      :label="item.Name"
      :value="item.Value">
    </el-option>
  </el-select>

</el-form-item>
        <el-form-item label="所属分类" prop="blsCatalogId">
          <el-cascader
            :options="categoryData"
            v-model="blsCatalogId"
            style="width: 100%"
            size="mini"
            :props="{children: 'Children', hasChildren: 'HasChildren', checkStrictly: true, value: 'ID', label: 'Name' }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="状态" prop="IsEnabled">
          <el-select v-model="addForm.IsEnabled" placeholder="请选择状态">
            <el-option label="禁用" :value="false"></el-option>
            <el-option label="启用" :value="true"></el-option>
          </el-select>
        </el-form-item>
       <el-form-item label="题型简介">
        <el-input type="textarea" v-model="addForm.Content"></el-input>
       </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="saveSubmit"
          :loading="addLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>

  </section>
</template>


<script>
import { getCategoryList,getQuestionTypeList, staticQuestionTypeEnum,saveQuestionType } from "../../api/api";
import { getButtonList } from "../../promissionRouter";
import QuestionTypeTooBar from '../../components/QuestionTypeTooBar'
import {getCategoysTreeId} from "../../api/helpCategory"
import qs from "qs";

export default {
  components: { QuestionTypeTooBar },
  data() {
    return {
      buttonList: [],
        select: {},
      categoryData: [],
      tableData: [],
      selectCatalogId:{},
      listLoading:false,
      questionTypes:[],
       blsCatalogId:[],
       allcategory:[],
      searchParam: {
        CategoryID:"",
        Name:"",
      },
       page: {
        PageSize: 15,
        PageIndex: 1,
        PageCount: 0,
        Where: "",
        Orders:"",
      },
      addFormVisible:false,
      addLoading:false,
      addFormRules: {
        Name: [
          { required: true, message: "请输入题型名称", trigger: "blur" },
        ]
       },
       //编辑界面数据
      addForm: {
       Name: "",
       Sequence:0,
      },
    }
  },
  methods: {
    callFunction(item) {
      if(item.selectCatalogId.length>0)
      {
      this.searchParam.CategoryID=item.selectCatalogId.slice(-1)[0];
      }
      this.searchParam.Name=item.search;
      if(item.Func=='search')
      {
        this.page.PageIndex=1;
      }
      this[item.Func].apply(this, item);
    },
     clickRow(row) {
      this.select = row;
      this.$refs.mytable.clearSelection();
      this.$refs.mytable.toggleRowSelection(row);
    },
      initCatalog () {
      let param = {};
      getCategoryList(param).then((data) => {
        if (data.IsSuccess) {
          this.categoryData = data.Data.TreeData;
           this.allcategory=data.Data.AllData;
        }
      });
    },
      handleCurrentChange(val) {
      this.page.PageIndex = val;
      this.search();
    },
    search()
    { 
      this.searchParam.Page=this.page;
      getQuestionTypeList(this.searchParam).then(res=>{
          if (res.data.IsSuccess) {
           this.tableData=res.data.Data.Data;
           this.page.PageCount=res.data.Data.PageCount;
          }
      });

    },
       //显示新增界面
    insert() {
      this.addFormVisible = true;
      this.addForm = {};
    },
    update(){
      if (!this.select.hasOwnProperty("ID")) {
        this.$message({
          message: "请选择要编辑的一行数据！",
          type: "error",
        });

        return;
      }
      this.selectCatalogId=[];
      this.addFormVisible = true;
      this.addForm = Object.assign({}, this.select);

     this.blsCatalogId=getCategoysTreeId(this.allcategory,this.select.CategoryID)


    },
    saveSubmit(){
      this.$refs.addFormRef.validate((valid) => {

          if(this.blsCatalogId.length>0)
          {
            this.addForm.CategoryID = this.blsCatalogId[this.blsCatalogId.length-1];
          }else{
              this.$message({
                message: '请输入选择所属项目分类',
                type: "error",
              });
          }

         if (valid) {
          let para = Object.assign({}, this.addForm);
    // this.addLoading = true;
          saveQuestionType(para).then(res=>{
      if (res.data.IsSuccess) {
           //   this.addLoading = false;
                this.addFormVisible = false;
              this.$message({
                message: res.data.Message,
                type: "success",
              });
              this.$refs["addFormRef"].resetFields();
            
              this.search();
            } else {
              this.$message({
                message: res.data.Message,
                type: "error",
              });
            }

          }
          )
         }
      });
    }
  },
  mounted() {
    this.initCatalog();
    this.search();
    staticQuestionTypeEnum().then(res=>{
     this.questionTypes=res;
    });
    let routers = window.localStorage.router
      ? JSON.parse(window.localStorage.router)
      : [];

    this.buttonList = getButtonList(this.$route.path, routers);
  },
};
</script>

